<script setup>

import NavigationBar from "@/components/navigationBar.vue";
import router from "@/router/index.js";
// import '../assets/css/index.css'  // 注释掉原始css导入

function goto(item) {

  router.push(item.goto)
}
const foodType = [
  {
    typeName: '美食',
    src: 'img/dcfl01.png',
    goto: '/businessList',
  },
  {
    typeName: '早餐',
    src: 'img/dcfl02.png',
    goto: '/businessList',
  },
  {
    typeName: '跑腿代购',
    src: 'img/dcfl03.png',
    goto: '/businessList',
  },
  {
    typeName: '汉堡披萨',
    src: 'img/dcfl04.png',
    goto: '/businessList',
  },
  {
    typeName: '甜品饮品',
    src: 'img/dcfl05.png',
    goto: '/businessList',
  },
  {
    typeName: '速食简餐',
    src: 'img/dcfl06.png',
    goto: '/businessList',
  },
  {
    typeName: '地方小吃',
    src: 'img/dcfl07.png',
    goto: '/businessList',
  },
  {
    typeName: '米粉面馆',
    src: 'img/dcfl08.png',
    goto: '/businessList',
  },
  {
    typeName: '包子粥铺',
    src: 'img/dcfl09.png',
    goto: '/businessList',
  },
  {
    typeName: '炸鸡炸串',
    src: 'img/dcfl10.png',
    goto: '/businessList',
  },
];

const businessList = [
  {
    img: "img/sj01.png",
    name: "万家饺子（软件园E18店）",
    rating: 4.9,
    monthlySales: 345,
    delivery: {
      minOrder: 15,
      deliveryFee: 3,
      distance: "3.22km",
      time: "30分钟"
    },
    deliveryType: "蜂鸟专送",
    description: "各种饺子",
    promotions: [
      { type: "new", text: "饿了么新用户首单立减9元" },
      { type: "special", text: "特价商品5元起" }
    ],
    activityCount: 2
  },
  {
    img: "img/sj02.png",
    name: "小锅饭豆腐馆（全运店）",
    rating: 4.9,
    monthlySales: 345,
    delivery: {
      minOrder: 15,
      deliveryFee: 3,
      distance: "3.22km",
      time: "30分钟"
    },
    deliveryType: "蜂鸟专送",
    description: "各种饺子",
    promotions: [
      { type: "new", text: "饿了么新用户首单立减9元" },
      { type: "special", text: "特价商品5元起" }
    ],
    activityCount: 2
  },
  {
    img: "img/sj03.png",
    name: "麦当劳麦乐送（全运路店）",
    rating: 4.9,
    monthlySales: 345,
    delivery: {
      minOrder: 15,
      deliveryFee: 3,
      distance: "3.22km",
      time: "30分钟"
    },
    deliveryType: "蜂鸟专送",
    description: "各种饺子",
    promotions: [
      { type: "new", text: "饿了么新用户首单立减9元" },
      { type: "special", text: "特价商品5元起" }
    ],
    activityCount: 2
  },
  {
    img: "img/sj04.png",
    name: "米村拌饭（浑南店）",
    rating: 4.9,
    monthlySales: 345,
    delivery: {
      minOrder: 15,
      deliveryFee: 3,
      distance: "3.22km",
      time: "30分钟"
    },
    deliveryType: "蜂鸟专送",
    description: "各种饺子",
    promotions: [
      { type: "new", text: "饿了么新用户首单立减9元" },
      { type: "special", text: "特价商品5元起" }
    ],
    activityCount: 2
  },
  {
    img: "img/sj05.png",
    name: "申记串道（中海康城店）",
    rating: 4.9,
    monthlySales: 345,
    delivery: {
      minOrder: 15,
      deliveryFee: 3,
      distance: "3.22km",
      time: "30分钟"
    },
    deliveryType: "蜂鸟专送",
    description: "各种饺子",
    promotions: [
      { type: "new", text: "饿了么新用户首单立减9元" },
      { type: "special", text: "特价商品5元起" }
    ],
    activityCount: 2
  }
];


</script>

<template>
  <!-- 总容器 -->
  <div class="wrapper ">
    <!-- header部分 -->
    <header class=" flex bg-[rgb(0,151,255)]  text-[25px] text-white font-[600] pl-6 pt-5 ">
      <i class="fa-solid fa-location-dot"></i>
      <div class="location-text ml-2">沈阳市规划大厦<i class="fa fa-caret-down "></i></div>
    </header>

    <!-- search部分 -->
    <!--
        搜索框部分（此块与search-fixed-top块宽度高度一致，用于当
      search-fixed-top块固定后，挡住下面块不要窜上去）
    -->
    <div class="search bg-[rgb(0,151,255)] h-[90px] pt-5">
      <!-- 当滚动条超过上面的定位块时，search-fixed-top块变成固定在顶部。 -->
      <div class="search-fixed-top" id="fixedBox">
        <!-- 搜索框部分中间的白框 -->
        <div class="search-box w-[90%] mx-auto  bg-white  h-[50px] text-center  font-[50] pt-2 text-[23px] text-gray-500  " style="font-family: '宋体', SimSun, 'STSong', serif;">
          <i class="fa fa-search"></i>搜索饿了么商家、商品名称
        </div>
      </div>
    </div>

    <!-- 点餐分类部分 -->
    <ul class="foodtype flex flex-wrap ">
      <li  class="w-1/5 pt-6 text-center" v-for="item in foodType" :key="item.typeName" @click="goto(item)">
        <img :alt=item.typeName :src=item.src class="w-16 h-16 mx-auto" >
        <p class=" text-[20px] text-gray-500">{{ item.typeName }}</p>
      </li>
    </ul>

    <!-- 横幅广告部分 -->
    <div class= "pt-5 pl-10 banner w-[96%] h-48  mx-auto bg-gradient-to-tl from-gray-200 to-gray-50 rounded-md">
      <h3 class="text-[28px] font-bold">品质套餐</h3>
      <p class="mt-1 mb-2 text-[23px] text-gray-500">搭配齐全吃得好</p>
      <a class="text-[20px] font-bold text-[rgb(199,144,96)]">立即抢购 &gt;</a>
    </div>

    <!-- 超级会员部分 -->
    <div class="supermember flex mx-auto  bg-[rgb(254,237,193)] h-[60px] w-[96%]">
      <div class="flex mt-2 ml-5">
        <img class="w-10 h-10 " src="img/super_member.png">
        <h3 class="mt-2 ml-4">超级会员</h3>
        <p class="mt-2 ml-4 font-[60]">&#8226; 每月享超值权益</p>
      </div>
      <div class="ml-auto mt-4">
        立即开通 &gt;
      </div>
    </div>

    <!-- 推荐商家部分 -->
    <div class="flex items-center justify-center mt-5 mb-5">
      <div class="w-12 h-px bg-gray-400"></div>
      <p class="text-[25px]">  推荐商家  </p>
      <div class="w-12 h-px bg-gray-400"></div>
    </div>

    <!-- 推荐方式部分 -->
    <ul class="recommendtype flex mt-1 mb-4 text-gray-700 text-[25px]">
      <li class="flex-1 flex justify-center items-center">综合排序<i class="fa fa-caret-down"></i></li>
      <li class="flex-1 flex justify-center items-center">距离最近</li>
      <li class="flex-1 flex justify-center items-center">销量最高</li>
      <li class="flex-1 flex justify-center items-center">筛选<i class="fa fa-filter"></i></li>
    </ul>

    <!-- 推荐商家列表部分 -->
    <ul class="business pt-6">
      <li v-for="item in businessList" :key="item.name" class="border-b  flex w-[95%] mx-auto">
        <img :src=item.img :alt=item.name class="w-[18%] h-[18%]">
        <div class="business-info pl-5 flex-1 pr-3 text-gray-500 text-[13px] ">
          <div class="business-info-h text-[20px] font-[600] flex  text-black ">
            <h3 >{{item.name}}</h3>
            <div class="business-info-like ml-auto">&#8226;</div>
          </div>
          <div class="business-info-star flex pt-1">
            <div class="business-info-star-left flex">
              <i class="fa fa-star text-yellow-300"></i>
              <i class="fa fa-star text-yellow-300"></i>
              <i class="fa fa-star text-yellow-300"></i>
              <i class="fa fa-star text-yellow-300"></i>
              <i class="fa fa-star text-yellow-300"></i>
              <p>{{item.rating}} {{ item.monthlySales }}</p>
            </div>
            <div class="business-info-star-right ml-auto ">
              {{ item.deliveryType }}
            </div>
          </div>
          <div class="business-info-delivery pt-1 flex">
            <p>&#165;{{item.delivery.minOrder}}起送 | &#165;{{item.delivery.deliveryFee}}配送</p>
            <p class="ml-auto" >{{item.delivery.distance}} | {{item.delivery.time}}</p>
          </div>
          <div class="border border-black w-[7ch] rounded">
            {{ item.description }}
          </div>

          <div class="business-info-explain">
            <div>{{ item.deliveryType }}</div>
          </div>
          <div class="business-info-promotion pt-1 flex">
            <div class="business-info-promotion-left flex">
              <div class="business-info-promotion-left-incon bg-green-400 rounded text-white ">新</div>
              <p class="pl-2" >{{ item.promotions[0].text }}</p>
            </div>
            <div class="business-info-promotion-right ml-auto pt-1 flex">
              <p>{{item.activityCount}}个活动</p>
              <i class="fa fa-caret-down"></i>
            </div>
          </div>
          <div class="business-info-promotion">
            <div class="business-info-promotion-left flex pt-1 pb-3 ">
              <div class="business-info-promotion-left-incon promotion-special rounded">特</div>
              <p class="pl-2">{{ item.promotions[1].text }}</p>
            </div>
          </div>
        </div>
      </li>
    <div class="h-[50px]">

    </div>
    </ul>
    <navigationBar></navigationBar>

  </div>


</template>

<style scoped>


.promotion-special {
  background-color: #F1884F;
}
</style>